<template lang="html">
    <div class="charge-add">
        <myHeader>
            <div class="submit">
                <span @click="addEventType">确定</span>
            </div>
        </myHeader>
        <div class="form-containner">
            <van-cell-group>
                <van-field
                    v-model="chargeTypesText"
                    required
                    clearable
                    label="店铺类型"
                    icon="question-o"
                    :readonly="true"
                    placeholder="请选择店铺类型"
                    @focus="getChargeType"
                />
                <van-field
                    v-model="storeInfo.name"
                    required
                    clearable
                    label="店铺名字"
                    icon="question-o"
                    placeholder="请输入店铺名字"
                />
                <van-field
                    v-model="storeInfo.address"
                    required
                    clearable
                    label="省市地址"
                    icon="question-o"
                    placeholder="请输入省市地址"
                />
                <van-field
                    v-model="storeInfo.street"
                    required
                    clearable
                    label="详细地址"
                    type="textarea"
                    icon="question-o"
                    placeholder="请选择详细地址"
                    rows="1"
                    autosize
                />
            </van-cell-group>
            <div class="product-list" v-for="(item, index) in productList" :key="index">
                <div class="title">
                    <span>商品{{index + 1}}</span>
                    <span class="color4C85BB" @click="addProduct">添加商品</span>
                </div>
                <div class="product-container">
                    <div class="input-list">
                        <van-cell-group>
                            <van-field
                                v-model="item.name"
                                required
                                clearable
                                label="商品名称"
                                placeholder="请输入商品名称"
                            />
                            <van-field
                                v-model="item.price"
                                required
                                clearable
                                label="商品价格"
                                placeholder="请输入商品价格"
                            />
                        </van-cell-group>
                    </div>
                    <div class="button-list" @click="delProduct(index)">
                        <van-button round type="danger">--</van-button>
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model="showChargeType" position="bottom" @click-overlay="clickOther">
            <van-picker :columns="columns" @change="onChange" />
        </van-popup>
    </div>
</template>

<script>
import Field from 'vant/lib/field'
import CellGroup from 'vant/lib/cell-group'
import Popup from 'vant/lib/popup'
import Picker from 'vant/lib/picker'
import Button from 'vant/lib/button'
import Locale from 'vant/lib/locale'
import BMap from 'BMap'
const messages = {
  'zh-CN': {
    vanPicker: {
      confirm: '关闭' // 将'确认'修改为'关闭'
    }
  }
}

Locale.add(messages)

export default {
    data(){
        return {
            chargeTypesText: '',
            showChargeType: false,
            chargeTypeList: [],
            curSelectType: '',
            pickObj: {},
            selectChargeTypes: [],
            productList: [{}],
            storeInfo: {},
            typeInfo: {}
        }
    },
    computed: {
        columns(){
            let result = []
            if (this.chargeTypeList.length) {
                let firstColumn = {
                    className: 'column1',
                    values: []
                }
                for (let i = 0; i < this.chargeTypeList.length; i++) {
                    firstColumn.values.push(this.chargeTypeList[i]['text'])
                    if (this.typeInfo.pid === this.chargeTypeList[i]['id']) {
                        firstColumn.defaultIndex = i
                        this.chargeTypesText = this.chargeTypeList[i]['text'] + ' / '
                    }
                }
                result.push(firstColumn)
                let secondColumn = {
                    className: 'column2',
                    values: []
                }
                if (this.curSelectType === '') {
                    this.curSelectType = this.chargeTypeList[0]['text']
                }
                for (let i = 0; i < this.chargeTypeList.length; i++) {
                    if (this.chargeTypeList[i]['text'] === this.curSelectType) {
                        for (var j = 0; j < this.chargeTypeList[i]['children'].length; j++) {
                            secondColumn.values.push(this.chargeTypeList[i]['children'][j]['text'])
                            if (this.typeInfo.id === this.chargeTypeList[i]['children'][j]['id']) {
                                secondColumn.defaultIndex = j
                                this.chargeTypesText += this.chargeTypeList[i]['children'][j]['text']
                            }
                        }
                    }
                }
                result.push(secondColumn)
            }
            return result
        }
    },
    components: {
        vanField: Field,
        vanPopup: Popup,
        vanPicker: Picker,
        vanCellGroup: CellGroup,
        vanButton: Button
    },
    methods:{
        getChargeType(){
            if (this.showChargeType) {
                for (let i = 0; i < this.selectChargeTypes.length; i++) {
                    if (!this.selectChargeTypes[i]) {
                        this.$vux.toast.show({text: '还没有选择完呢！'})
                        return false
                    }
                    let curParentChild = []
                    for (var i = 0; i < this.chargeTypeList.length; i++) {
                        if (this.chargeTypeList[i]['text'] === this.selectChargeTypes[0]) {
                            curParentChild = this.chargeTypeList[i]['children']
                        }
                    }
                    if (curParentChild.length) {
                        for (var i = 0; i < curParentChild.length; i++) {
                            if (curParentChild[i]['text'] === this.selectChargeTypes[1]) {
                                this.storeInfo.type = curParentChild[i]['id']
                            }
                        }
                    }
                    this.chargeTypesText = this.selectChargeTypes.join('/')
                }
            }
            this.showChargeType = !this.showChargeType
        },
        onChange(picker, values) {
            this.curSelectType = values[0]
            this.selectChargeTypes = values
            this.pickObj = picker
            // picker.setColumnValues(1, citys[values[0]]);
        },
        getChargeTypeList(){
            this.$api.get('/charge/types').then(res => {
                this.chargeTypeList = res
                if (this.$route.query.id) {
                    this.getStoreDetail()
                }
            })
        },
        clickOther(){
            this.getChargeType()
        },
        addProduct(){
            this.productList.push({})
        },
        delProduct(index){
            this.productList.splice(index, 1)
        },
        addEventType(){
            let reqData = {
                store: JSON.stringify(this.storeInfo),
                productList: JSON.stringify(this.productList)
            }
            let text = '添加成功！'
            if (this.$route.query.id) {
                text = '修改成功！'
            }
            this.$api.post('/store/add', reqData).then(res => {
                this.$vux.toast.show({text: text})
                this.$router.go(-1)
            })
        },
        getll(){
            let geolocation = new BMap.Geolocation();
            let _this = this
            geolocation.getCurrentPosition(function(r){
        		if(this.getStatus() == BMAP_STATUS_SUCCESS){
        			console.log('您的位置：'+r.point.lng+','+r.point.lat)
                    _this.storeInfo.longitude = r.point.lng
                    _this.storeInfo.latitude = r.point.lat
        		}
        		else {
        			console.log('failed')
        		}
        	},{enableHighAccuracy: true})
        },
        getStoreDetail(){
            this.$vux.loading.show({
                text: '加载中'
            })
            this.$api.get('/store/get-detail', {
                id: this.$route.query.id
            }).then(res => {
                this.$vux.loading.hide()
                this.storeInfo = res.storeInfo
                this.productList = [{}]
                if (res.productList.length) {
                    this.productList = res.productList
                }
                this.typeInfo = res.typeInfo
            })
        }
    },
    created(){
        this.getChargeTypeList()
        this.getll()
    },
    watch: {
        '$route'(){
            this.getChargeTypeList()
            this.getll()
        }
    }
}
</script>

<style lang="scss" scoped>
    .charge-add{
        padding-bottom: .6rem;
        .form-containner{
            margin-top: .1rem;
        }
        .product-list{
            .title{
                font-size: 100%;
                line-height: .4rem;
                padding: 0 .1rem;
                display: flex;
                justify-content: space-between;
            }
            .product-container{
                display: flex;
                .input-list{
                    width: 3rem;
                }
                .button-list{
                    flex: 1;
                    text-align: center;
                    align-self: center;
                }
            }
        }
        .color4C85BB{
            color: #4C85BB;
        }
        .submit{
            font-size: .16rem;
            text-align: right;
            padding-right: .1rem;
        }
    }
</style>
